<template>
  是否显示：<input v-model="isShow" type="checkbox">
  <!--v-show：指令表达式为真时才会渲染该元素
      无论该指令的表达式是否 true 或 false，该元素在元素中是保留该元素的
      为 true 时会删除该元素的 display:none 样式，为 false 时会给该元素添加 display:none 样式-->
    <h3 v-show="isShow">这是一个普通的标题标签</h3>

    <hr>
  年龄: <input v-model="age" max="100" min="0" type="range"> {{ age }}
    <h1 v-show="age < 18">未成年</h1>
    <h2 v-show="age >= 18 && age < 35">青年</h2>
    <h3 v-show="age >= 35 && age < 50">中年</h3>
    <h4 v-show="age >= 50">老年</h4>

    <hr>
  周几: <input v-model="week" max="7" min="1" type="range"> {{ week }}
  <!-- v-show：不可以配合 template 元素使用 -->
  <!-- <template v-show="week == 1 || week == 3 || week == 5 || week == 7">
      <h1>可以游泳</h1>
  </template>
  <template v-shw="week == 12 || week == 4 || week == 6">
      <h1>不可以游泳</h1>
  </template> -->
</template>

<script>
export default {
    data: () => ({
        isShow: false, // 是否显示
        age: 20, // 年龄
        week: 3// 周几
    })
}
</script>

<script setup>
import {ref} from 'vue'

let isShow = ref(false)  // 是否显示
let age = ref(20)  // 年龄
let week = ref(3)  // 周几
</script>